如何使用vue在点击按钮后隐藏指定区域的内容，再次点击按钮隐藏内容显示。实现思路：首先需要将一个属性设置为true(show:true)，然后使用v-if将show属性绑定到要显示的内容的标签上，最后在click按钮上添加一个click事件，当show属性为true时设置为false，当show属性为false时设置为true(这。show=！这个节目)。

1.创建一个新的html页面，然后在这个代码页上用id app创建一个div标签，然后在这个div标签中创建一个按钮标签和一个隐藏的div标签。

代码：

Div id='app '按钮单击隐藏，然后单击显示/按钮世界/div/div

2.引入vue.js在body的结束标记之前引入带有sctipt的vue.js文件。

3.为vue创建一个挂载点。在vue.js导入文件后面创建一个新的sctipt标记，然后创建vue的挂载点。

Js代码：

script var app=new Vue({ El : ' # app '，})/script

4.使用数据创建show属性，并将默认值设置为true；

使用metheds创建一个点击事件(showCont)，当显示值为真时修改为假，当显示值为假时修改为真。

代码：

data:{show:true}，methods : { show cont : FuncTion(){ this . show=！这个节目。}}

5.增加显示和隐藏功能。在按钮标签上添加点击事件showCont，在按钮标签后面的div标签上使用v-if添加show属性。

代码：

按钮@点击='显示控制'点击隐藏，然后点击显示/按钮

div v-if='show'hello world/div

6.保存html代码，然后用浏览器打开它。点击按钮发现按钮后面的文字被隐藏，再次点击按钮显示隐藏内容。

7.所有代码。可以直接复制所有的代码，粘贴到新创建的html文件中，修改引入的vue.js路径，保存，用浏览器打开看看效果。

！doctype html townleta charset=' utf-8 ' title/title/head dydiv id=' app ' button @ click=' show cont ' click hide然后单击show/button div v-if=' show ' hello world/div/Divscript type=' text/JAVAScript ' src=' http : js/vue . js '/script所有代码。可以直接复制所有的代码，粘贴到新创建的html文件中，修改引入的vue.js路径，保存，用浏览器打开看看效果。doctype htmlheartheta charset=' utf-8 ' title/title/headsdydiv id=' app ' button @ click=' show cont ' click hide然后单击show/button div v-if=' show ' hello world/div/div script type=' text/JavaScript ' src=' http : js/Vue . js '/script var app=new Vue({ El : ' # app '，data 3: { show : true }，methods 3360这个节目。} } })/script/body/html tion(){ this . show=！这个节目。} } })/脚本/正文/html

版权声明：vue实现点击隐藏和显示实例共享是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益，请联系本站底部QQ或者邮箱删除。